<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        table {
            margin: 0 auto;
            width: 600px;
            /* height: 200px; */
            /* border-radius: 50px; */
            border: 2px solid blue;
        }

        td {
            width: 56px;
            height: 80px;
            border: 1px solid rosybrown;
            text-align: center;
            font-size: 16px;
            line-height: 80px;
        }
        div{
            margin: 200px auto;
            width: 300px;
            height: 40px;
            border: 5px dotted yellow;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>歌手名称</th>
            <th>性别</th>
            <th>专辑总数</th>
            <th>总销量</th>
            <th>专辑列表</th>
        </tr>
        <tr>
            <td id="name"></td>
            <td id="sex"></td>
            <td id="zj"></td>
            <td id="xl"></td>
            <td id="lb"></td>
        </tr>

    </table>
    <div>
        <button id="btn1">隔壁老樊</button>
        <button id="btn2">林俊杰</button>
        <button id="btn3">薛之谦</button>
    </div>
    <script>
        $("#btn1").click(() => {
            $.ajax({
                url:"http://localhost:8080/sing",
                method:"POST",
                data:JSON.stringify({
                    name: "测试数据",
                }),
                contentType: "application/json",
                success: function (data) {
                    console.log(data);
                    var song = JSON.parse(data);
                    $("#name").text(song.gblf.name);
                    $("#sex").text(song.gblf.sex);
                    $("#zj").text(song.gblf.zj);
                    $("#xl").text(song.gblf.xl);
                    $("#lb").text(song.gblf.lb);
                },
            });
        });
        $("#btn2").click(() => {
            $.ajax({
                url:"http://localhost:8080/sing",
                method:"POST",
                data:JSON.stringify({
                    name: "测试数据",
                }),
                contentType: "application/json",
                success: function (data) {
                    console.log(data);
                    var song = JSON.parse(data);
                    $("#name").text(song.ljj.name);
                    $("#sex").text(song.ljj.sex);
                    $("#zj").text(song.ljj.zj);
                    $("#xl").text(song.ljj.xl);
                    $("#lb").text(song.ljj.lb);
                },
            });
        });
        $("#btn3").click(() => {
            $.ajax({
                url:"http://localhost:8080/sing",
                method:"POST",
                data:JSON.stringify({
                    name: "测试数据",
                }),
                contentType: "application/json",
                success: function (data) {
                    console.log(data);
                    var song = JSON.parse(data);
                    $("#name").text(song.xzq.name);
                    $("#sex").text(song.xzq.sex);
                    $("#zj").text(song.xzq.zj);
                    $("#xl").text(song.xzq.xl);
                    $("#lb").text(song.xzq.lb);
                },
            });
        });
    </script>
</body>

</html>